//二次封装 antd 选择器
<template>
  <!-- $listeners 对象在 Vue 3 中已被移除。  -->
  <a-select v-bind="$attrs" @change="handleChange">
    <template v-for="(index, name) in $slots" :key="name" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps||{}" ></slot>
    </template>
  </a-select>
</template>
<script>
/**
 * 二次封装 antd 选择器
 * 目的：
 * 解决后台需要选择中数据的多个字段
 * 注意：
 * 不要使用v-model:key =>因为key 是vue 关键字；
 * 双向绑定字段需要与change事件options中的key对应
 * 
*/
import { defineComponent, ref, reactive, toRefs, toRaw } from "vue";
const staticData = {};
export default defineComponent({
  name: 'DSelect',
  components: {},
  setup(props,{emit,attrs}) {
    const data = reactive({
      keyModel:[],
    });
    const mothods = {
      initKeyModel(){
        for(let key in attrs){
          if(key.indexOf("onUpdate:")>-1&&key!="onUpdate:value"){
            data.keyModel.push(key.split(":")[1])
          }
        }
      },
      handleChange(value,options){
        console.log("二次封装组件",value,options);
        const _selType=Array.isArray(options);//判断选择器是多选还是单选
        if(_selType){
          mothods.handleMultiple(value,options);
        }else{
          mothods.handleSingle(value,options);
        }
      },
      //单选
      handleSingle(value,options){
        let _keyModel=data.keyModel;
        for(let i=0;i<_keyModel.length;i++){
          let _key=_keyModel[i];
          emit(`update:${_key}`,value?options[_key]:value);
        }
      },
      //多选
      handleMultiple(value,options){
        let _keyModel=data.keyModel;
        for(let i=0;i<_keyModel.length;i++){
          let _key =_keyModel[i];
          emit(`update:${_key}`,value&&value.length?mothods.handleMulKey(options,_key):value);
        }
      },
      handleMulKey(options,key){
        const _iskey=options.length&&Object.keys(options[0]).indexOf(key)>-1;
        let _item=[];
        if(_iskey){
          _item=options.map(item=>item[key]);
        }
        return _item;
      }
    };
    mothods.initKeyModel();
    return {
      ...toRefs(data),
      ...staticData,
      ...mothods,
    };
  },
});
</script>
<style scoped>
</style>